<template>
  <div class="password-update">
    <PageTitle title="修改密码"></PageTitle>
    <el-card class="password-update-content">
      <h1 style="margin-bottom: 20px; font-weight: 400">请设置新密码</h1>
      <el-form size="small" label-width="80px" label-position="top" :model="updateForm" :rules="updateRules" ref="updateForm">
        <el-form-item label="邮箱号:" prop="email">
          <el-input v-model="updateForm.email" disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="password">
          <el-input v-model="updateForm.password" placeholder="请输入新密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="repassword">
          <el-input v-model="updateForm.repassword" placeholder="请输入确认密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱验证码:" prop="vcode">
          <el-col :span="14">
            <el-input v-model="updateForm.vcode" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="1">&nbsp;</el-col>
          <el-col :span="9"><el-button @click="sendCode()">发送验证码</el-button></el-col>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        size="large"
        style="width: 17%; margin-top: 10px"
        @click="goUpdate"
        >确认</el-button
      >
    </el-card>
  </div>
</template>

<script>
import { getUpdateCode } from '@/api/common'
import { updataPassword } from '@/api/user'
import { mapState } from 'vuex'
import PageTitle from '@/components/common/PageTitle'
export default {
  name: 'PasswordUpdate',
  components: {
    PageTitle
  },
  data () {
    return {
      updateForm: {
        // email: this.userInfo.email,
        password: '',
        repassword: '',
        vcode: ''
      },
      updateRules: {
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            triggle: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入新密码',
            triggle: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '密码长度应该为6-16位',
            triggle: 'blur'
          }
        ],
        repassword: [
          {
            required: true,
            message: '请输入确认密码',
            triggle: 'blur'
          },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.updateForm.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            triggle: 'blur'
          }
        ],
        vcode: [
          {
            required: true,
            message: '请输入邮箱验证码',
            triggle: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.updateForm.email = this.userInfo.email
  },
  methods: {
    sendCode () {
      this.getUpdateCode()
    },
    async getUpdateCode () {
      const res = await getUpdateCode(this.updateForm.email)
      this.$message({
        type: 'success',
        message: res
      })
    },
    goUpdate () {
      this.$refs.updateForm.validate(async (value) => {
        if (value) {
          this.updataPassword()
        }
      })
    },
    async updataPassword () {
      const res = await updataPassword(this.updateForm)
      this.$message({
        type: 'success',
        message: res
      })
      this.$router.back()
    }
  }
}
</script>

<style lang="less" scoped>
.password-update {
  position: relative;
  margin-top: 50px;
  width: 100%;
}
.password-update-content {
  width: 800px;
  margin: 0 auto;
  background: url(../../assets/emp-logo.png) no-repeat;
  background-position: right;
  .el-form {
    width: 300px;
  }
}
</style>
